<!--
 * @Author: wangshuguang
 * @Date: 2022-10-19 11:26:08
 * @LastEditTime: 2022-10-20 11:05:31
 * @LastEditors: wangshuguang
 * @Description: 可看范围选择模块
-->
<template>
  <div>
    <!-- 可看范围 -->
    <el-form-item label="可看范围:" prop="agtList">
      <el-radio-group v-model="agtRadio" :max="2" :disabled="disabled" @change="agtRadioChange">
        <el-radio :label="1">全部可看</el-radio>
        <el-radio :label="2">部分可看</el-radio>
      </el-radio-group>
      <div v-show="agtRadio == 2" class="baseItem ">
        <div style="color:#909399;">
          已选&nbsp;
          <span style="color:#EE0000;">{{ form.agtList.length }}</span>
          &nbsp;个机构
        </div>
        <el-select v-model="form.agtList" filterable multiple placeholder="请选择" :disabled="disabled" class="baseItem ">
          <el-option
            v-for="agt in agtListData"
            :key="agt.deptId"
            :label="agt.deptName"
            :value="agt.deptId"
          />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item v-show="agtRadio == 2" label="指定范围" prop="roleNm">
      <el-checkbox-group v-model="form.roleNm" :disabled="disabled">
        <el-checkbox label="O">机构</el-checkbox>
        <el-checkbox label="A">代理</el-checkbox>
        <el-checkbox label="M">商户</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script>
import { servicerDeptList } from '@/api/knowledge'
export default {
  props: {
    form: {},
    disabled: {},
    value: {}
  },
  data() {
    return {
      agtListData: [],
      agtObj: {}
    }
  },
  computed: {
    agtRadio: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    }
  },
  watch: {
    // 根据agtList 实时拼接
    'form.agtList': function() {
      this.form.agtListObj = this.form.agtList.map(id => {
        const obj = this.agtObj[id] || {}
        return {
          'agtId': obj.deptId,
          'agtNm': obj.deptName
        }
      })
      console.log('form.agtList', this.form.agtList, this.form.agtListObj)
    }
  },
  mounted() {
    this.getBaseData()
    console.log('form', this.form)
  },
  methods: {
    agtRadioChange(val) {
      console.log('agtRadioChange', val)
      // 可看范围修改
      if (val == 1) {
        this.form.roleNm = []
      } else {
        this.form.roleNm = ['O', 'A', 'M']
      }
    },
    getBaseData() {
      servicerDeptList({
        pageSize: 999,
        currentPage: 1
      }).then(res => {
        console.log('res', res)
        this.agtListData = res.data.row.map(agt => {
          const obj = { ...agt, deptId: agt.id }
          this.$set(this.agtObj, obj.id, obj)
          return obj
        })
      })
    }
  }
}
</script>

<style>

</style>
